<template>
  <div class="app-container initializeRoll">
    <div class="topDiv servers" style="padding: 0 10px">
      <div class="title">
        <img src="../../../assets/images/wtb4.png" alt />
        <span>平台财务</span>
      </div>
      <!-- <el-form
        :model="queryParams"
        ref="queryForm"
        v-show="showSearch"
        label-width="68px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="时间">
              <el-date-picker
              :picker-options="pickerOptions0"
                v-model="dateRange"
                value-format="yyyy-M-d"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="[dateRange[0], dateRange[1]]"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="1">
            <el-form-item label="租户名称">
              <el-input v-model="queryParams.name" maxlength="32"  onkeyup="this.value=this.value.replace(/[, ]/g,'')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="getList"
                round
                size="mini"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" @click="resetQuery" round
                    >重置</el-button
                  >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form> -->

      <div class="containers center">
        <el-row style="margin-bottom: 0">
          <el-col
            :span="6"
            style="border-right: 0.1px solid #eeeeee; text-align: center"
          >
            <div style="transform: translateY(15px)">
              <div style="color: #0D9E59F; margin-bottom: 5px; color: #0d9e59">
                ￥<span
                  style="color: #0d9e59; font-size: 30px; margin-bottom: 5px"
                  >{{ CardData.totalAnticipatedTotal||0 }}</span
                >
              </div>
              <div>总发佣(元)</div>
            </div>
          </el-col>
          <el-col
            :span="6"
            style="
              border-right: 0.1px solid #eeeeee;
              text-align: center;
              transform: translateY(15px);
            "
          >
            <div style="color: #F9800BF; margin-bottom: 5px; color: #f9800b">
              ￥<span
                style="color: #f9800b; font-size: 30px; margin-bottom: 5px"
                >{{ CardData.totalActualTotal||0 }}</span
              >
            </div>
            <div>总支出(元)</div>
          </el-col>
          <el-col
            :span="6"
            style="
              border-right: 0.1px solid #eeeeee;
              text-align: center;
              transform: translateY(15px);
            "
          >
            <div style="color: #3875F; margin-bottom: 5px; color: #3875f6">
              ￥<span style="color: #3875f6; font-size: 30px">{{
                CardData.totalBanlanceTotal||0
              }}</span>
            </div>
            <div>租户余额(元)</div>
          </el-col>
        </el-row>
      </div>

      <div style="margin-top: 40px">
        <el-table
          :data="roleList"
        >
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column label="租户名称" align="center" prop="tenantName" />
          <el-table-column
            label="租户账户"
            prop="tenantNo"
            :show-overflow-tooltip="true"
            align="center"
          />
          <el-table-column
            label="租户手机号"
            prop="tenantPhone"
            align="center"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="租户的总发佣"
            align="center"
            prop="anticipatedTotal"
          />
          <el-table-column
            label="租户的总支出"
            align="center"
            prop="actualTotal"
          >
            <!-- <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-value="0"
                    inactive-value="1"
                    @change="handleStatusChange(scope.row)"
                  ></el-switch>
                </template> -->
          </el-table-column>
          <el-table-column label="租户余额" align="center" prop="banlanceTotal">
          </el-table-column>
        </el-table>
      </div>
      <!-- <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      /> -->

    </div>
  </div>
</template>

<script>
// import Test from "@/components/Test";

// import { getUserId } from "@/api/liu/login.js";
import {
  cpaTenantFinanceStatistics,
  cpaTenantFinanceList,capTenantFinace1
} from "@/api/finance/index.js";
export default {
  data() {
    return {
      pickerOptions0: {
          disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
          }
        },
      // 切换佣金收入和分润收入
      activeName: "0",
      // ..提现弹窗
      centerDialogVisible: false,
      // ..提现窗口3个数据
      ruleForm: {
        money: "",
        region: "",
        date2: "",
        monetUser: "",
      },
      // ..卡片总数据
      CardData: {
        TotalRevenue: "", //总收入
        CommissionIncome: "", //佣金收入
        ProfitIncome: "", //利润收入
        AccountBalance: "", //账户余额
      },
      rules: {
        money: [{ required: true, message: "请输入提现金额", trigger: "blur" }],
        region: [
          { required: true, message: "请选择提现类型", trigger: "change" },
        ],
        monetUser: [
          { required: true, message: "请选择提现账号", trigger: "blur" },
        ],
      },
      // ..提现账号下拉框数据
      monetUser: [],
      // 用户ID
      userId: 0,

      // 时间
      dateRange: [],
      // tab切换
      // activeName: "first",
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 分页总条数
      total: 0,
      // 收入表格数据
      noticeList: [],
      // 状态数据字典
      typeOptions: [
        {
          dictLabel: "分润",
          dictValue: 0,
        },
        {
          dictLabel: "佣金",
          dictValue: 1,
        },
      ],
      // 查询参数
      queryParams: {
        name: "",
        pageNum: 1,
        pageSize: 10,
        // 收入类型
        amountType: "1",
        // 时间
        // dateRange: "",
      },
      roleList: [],
    };
  },
  mounted() {
    //获取当月初
     var curr_time = new Date();
     var monthDate = new Date(curr_time.getFullYear(), curr_time.getMonth(), 1);
    var ctime = monthDate.getFullYear() + '-' + (monthDate.getMonth() + 1) + "-" + monthDate.getDate();
    this.dateRange[0]=ctime;
    //获取今天日期
    var Today=new Date();
    var riqi=Today.getFullYear()+'-'+(Today.getMonth()+1)+'-'+Today.getDate();
     this.dateRange[1]=riqi;

     console.log(this.dateRange,'0000')
    this.getList();
  },
  methods: {
    handleClick1(tab, event) {
      console.log(tab, event);
    },
    /** 查询角色列表 */
    async getList() {

  
      const userID = sessionStorage.getItem("userID");
      this.userId = userID - 0;

      //获取列表老接口
      // const param = {
      //   beginDate: this.dateRange[0], //创建时间
      //   endDate: this.dateRange[1], //结束时间
      //   tenantName: this.queryParams.name, //租户名称
      //   pageSize: this.queryParams.pageSize,
      //   pageNum: this.queryParams.pageNum,
      // };
      // const data = await cpaTenantFinanceList(param);
      // console.log(data, "数据222222");

      //获取列表新接口
      const data=await capTenantFinace1({tenId:this.userId});
      console.log(data,'列表数据和卡片')
      if(data.code==200){
         this.roleList = data.data.content;
      this.CardData.totalBanlanceTotal=data.data.banlanceTotal;  //租户余额
      this.CardData.totalActualTotal=data.data.actualTotal;  //总支出
      this.CardData.totalAnticipatedTotal=data.data.anticipatedTotal;  //总发佣
      }
     
      // this.total = data.list.length;
  

      // const card = await cpaTenantFinanceStatistics(param);
      this.CardData = card;
      console.log(card, "卡片");
    },
    // ..获取卡片总数数据
    totalParam() {
      selectCapUserWalletRecordListNum({ userId: this.userId }).then((res) => {
        // console.log(res,'卡片总数数据')
        if (res.code == 200) {
          this.CardData.TotalRevenue = res.data.zongjiesuan;
          this.CardData.CommissionIncome = res.data.yongjinjiesuan;
          this.CardData.ProfitIncome = res.data.fenchengjiesuan;
          this.CardData.AccountBalance = res.data.yue;
        } else {
          this.$message.error("获取数据失败!");
        }
      });
    },
    // ..获取账户余额
    userBalance() {
      // selectCapUserWalletById().then(res=>{
      //   console.log(res,'2222222')
      // })
    },
    // ..佣金收入
    Commission() {
      const data = {
        capUserWalletRecord: {
          createTime: "" || this.dateRange[0],
          updateTime: "" || this.dateRange[1],
          amountType: "1",
        },
        pageNum: this.pageNum,
        pageSize: this.pageSizes,
      };
      // 获取佣金收入列表
      selectCapUserWalletRecordListFy(data).then((res) => {
        console.log(res, "佣金收入列表");
        this.noticeList = res.data.list;
      });
    },
    // ..分页器
    handleCurrentChange(value) {
      console.log(value, "1");
    },
    handleSizeChange(value) {
      console.log(value, "2");
      this.pageSizes = value;
      console.log(this.pageSizes, "2");
    },
    // ..选择提现类型
    moneyType() {
      // console.log(this.ruleForm.region, "5555555");
      // 1代表支付宝
      if (this.ruleForm.region == "1") {
        gutUserWithdrawalAccountSelectAlipay(this.ruleForm.region).then(
          (res) => {
            this.monetUser = res;
            this.ruleForm.monetUser = this.monetUser[0].id;
          }
        );
      } else {
        selectByPageNumSizeTxList({
          pageNum: 1,
          pageSize: 6,
        }).then((res) => {
          this.monetUser = res.data.list;
          //  console.log( this.monetUser, "3333");
          this.ruleForm.monetUser = this.monetUser[0].id;
        });
        // gutUserWithdrawalAccountSelectBank("1").then((res) => {
        //   console.log(res,'3333')
        //   this.monetUser = res;
        //   console.log(this.monetUser[0].id);
        //   this.ruleForm.monetUser = this.monetUser[0].id;
        // });
      }
    },
    // ..确认提现
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var b =
            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
          if (this.ruleForm.money <= 0 || !b.test(this.ruleForm.money)) {
            this.$message.error("金额格式错误");
          } else {
            // ..如果选择银行卡提现
            if (this.ruleForm.region == "0") {
              const withdrawalVo = {
                bankCardId: this.ruleForm.monetUser,
                withdrawal: {
                  amount: this.ruleForm.money - 0,
                  amountType: "1",
                },
              };
              console.log(withdrawalVo, "22222222");
              bankCardAPI(withdrawalVo).then((res) => {
                console.log(res, "结果8888888888888888888888888888");
              });
            } else {
              console.log("我是支付宝");
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    // ..提现按钮
    withdraw() {
      // console.log(this.userId, "55555");
      this.centerDialogVisible = true;
      // this.$router.push({path:'/basics/myAccount'});
    },
    postSelectCapWithdrawalRecordListFun() {
      let objData = { ...this.queryParams };
      objData.userId = this.userId;
      // postSelectCapWithdrawalRecordList(objData).then((data) => {
      //   this.noticeList = data;
      //   this.loading = false;
      // });
    },

    handleClick(tab, event) {
      // console.log(tab, event, "4444");
      // console.log(tab.index, "4444");
      // console.log(this.userId, "33333333333");
      // ..查询提现记录
      // getSelectCapWithdrawalRecordById(this.userId).then((res) => {
      //   console.log(res, "结果");
      // });
      // ..提现记录列表
      if (tab.index == "3") {
        getselectByPageNumSize({
          pageNum: this.pageNum,
          pageSize: this.pageSizes,
        }).then((res) => {
          res.data.list.map((item) => {
            item.withdrawalType = "余额提现";
          });
          this.noticeList = res.data.list;
          // console.log(res.data.list, "结果");
        });
      } else if (tab.index == "1") {
        //点击分润收入
        const data = {
          capUserWalletRecord: {
            amountType: "0",
          },
          pageNum: this.pageNum,
          pageSize: this.pageSizes,
        };
        // 获取分润收入列表
        selectCapUserWalletRecordListFy(data).then((res) => {
          console.log(res, "分润收入");
          this.noticeList = res.data.list;
        });
      } else if (tab.index == "0") {
        //点击佣金收入
        this.Commission();
      }

      this.postSelectCapWithdrawalRecordListFun();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.dateRange, "日期");
      // 卡片数据
      const data = {
        createTime: this.dateRange[0],
        updateTime: this.dateRange[1],
        userId: this.userId,
      };
      selectCapUserWalletRecordListNum(data).then((res) => {
        console.log(res, "搜索卡片总数数据");
        if (res.code == 200) {
          this.CardData.TotalRevenue = res.data.zongjiesuan;
          this.CardData.CommissionIncome = res.data.yongjinjiesuan;
          this.CardData.ProfitIncome = res.data.fenchengjiesuan;
          this.CardData.AccountBalance = res.data.yue;
        } else {
          this.$message.error("获取数据失败!");
        }
      });

      this.Commission();
      this.postSelectCapWithdrawalRecordListFun();
    },
  },
};
</script>
<style scoped lang="scss">
.servers {
  padding: 20px;
  overflow: hidden;
  height: 807px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  .title {
    height: 50px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    img {
      height: 30px;
      margin-right: 10px;
    }
  }
  .sousuoBox {
    margin-top: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    .el-form-item {
      margin-right: 50px;
    }
  }
}
</style>
